<template>
  <div class="search-container">
    <div class="input-wrapper">
      <textarea
        ref="inputRef"
        v-model="searchQuery"
        @keyup.enter="handleSearch"
        placeholder="输入你的消息..."
        rows="1"
        :style="{ height: textareaHeight + 'px' }"
        @input="adjustHeight"
      ></textarea>
      <div class="model-selector">
        <select 
          id="model-select" 
          v-model="modelValue" 
          @change="updateModel"
          class="model-dropdown"
        >
          <option value="openai">OpenAI</option>
          <option value="ollama">Ollama</option>
        </select>
      </div>
      <div class="button-group">
        <button class="action-button" @click="handleSearch" :disabled="isLoading || !searchQuery.trim()">
          <span v-if="isLoading" class="loading-dots">
            <span></span>
            <span></span>
            <span></span>
          </span>
          <svg v-else class="icon" viewBox="0 0 24 24" width="16" height="16">
            <path fill="currentColor" d="M13 19.1l7.7-7.7c.4-.4.4-1 0-1.4l-7.7-7.7c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l6 6H4c-.6 0-1 .4-1 1s.4 1 1 1h13.6l-6 6c-.2.2-.3.5-.3.7 0 .3.1.5.3.7.4.4 1 .4 1.4 0z"/>
          </svg>
        </button>
      </div>
    </div>
    <div v-if="errorMessage" class="error-message">
      {{ errorMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { bingSearch } from '../api/bingSearch';

const props = defineProps({
  selectedModel: {
    type: String,
    default: 'openai'
  }
});

const emit = defineEmits([
  'search-start', 
  'search-success', 
  'search-error',
  'update:selectedModel'
]);

const inputRef = ref(null);
const textareaHeight = ref(44);
const searchQuery = ref('');
const modelValue = ref(props.selectedModel);

// 监听props变化
watch(() => props.selectedModel, (newValue) => {
  modelValue.value = newValue;
});

const updateModel = () => {
  emit('update:selectedModel', modelValue.value);
};

const adjustHeight = () => {
  if (inputRef.value) {
    inputRef.value.style.height = 'auto';
    textareaHeight.value = Math.min(inputRef.value.scrollHeight, 200);
  }
};
const isLoading = ref(false);
const errorMessage = ref('');

const handleSearch = async () => {
  if (!searchQuery.value.trim()) return;
  
  try {
    isLoading.value = true;
    errorMessage.value = '';
    emit('search-start');
    
    const results = await bingSearch(searchQuery.value);
    emit('search-success', results, searchQuery.value);
  } catch (error) {
    errorMessage.value = error.message || '搜索失败，请重试';
    emit('search-error', error);
  } finally {
    isLoading.value = false;
  }
};

// 暴露给父组件的方法
const setSearchQuery = (query) => {
  searchQuery.value = query;
  if (inputRef.value) {
    adjustHeight();
  }
};

const triggerSearch = () => {
  handleSearch();
};

defineExpose({
  setSearchQuery,
  triggerSearch
});
</script>

<style scoped>
.search-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}

.input-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
  border: 1px solid #eaecef;
  border-radius: 12px;
  transition: all 0.2s ease;
  padding-bottom: 8px;
}

.input-wrapper:focus-within {
  background: white;
  border-color: #4e6ef2;
  box-shadow: 0 0 0 2px rgba(78, 110, 242, 0.1);
}

.model-selector {
  position: absolute;
  left: 12px;
  bottom: 8px;
  z-index: 2;
}

.model-dropdown {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  background-color: transparent;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  max-width: 90px;
}

.model-dropdown:hover, .model-dropdown:focus {
  color: #4e6ef2;
  background-color: rgba(78, 110, 242, 0.05);
}

textarea {
  width: 100%;
  padding: 12px 16px;
  padding-right: 56px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  background: transparent;
  color: #333;
  resize: none;
  overflow-y: hidden;
  min-height: 44px;
  max-height: 200px;
}

textarea:focus {
  outline: none;
}

.button-group {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 8px;
}

.action-button {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4e6ef2;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-button:hover {
  background: #3b5ef0;
  transform: translateY(-1px);
}

.action-button:disabled {
  background: #e9ecef;
  color: #adb5bd;
  cursor: not-allowed;
  transform: none;
}

.icon {
  width: 16px;
  height: 16px;
}

.loading-dots {
  display: flex;
  gap: 2px;
}

.loading-dots span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: dot-flashing 1s infinite linear alternate;
}

.loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dot-flashing {
  0% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

.error-message {
  position: absolute;
  bottom: -24px;
  left: 16px;
  color: #dc3545;
  font-size: 12px;
}

@media (max-width: 768px) {
  .search-container {
    padding: 12px;
  }
  
  .model-dropdown {
    font-size: 12px;
    padding: 3px 6px;
    max-width: 70px;
  }
  
  .model-selector {
    left: 8px;
    bottom: 6px;
  }
}
</style>